<template>
  <div class="">
        <el-tabs type="card">
            <el-tab-pane label="设备公司">

                <p class="label">中文</p>
                <quill-editor v-model="infoForm.a_content" ref="myQuillEditor" class="editer"
                        :options="editorOption" @ready="onEditorReady($event)">
                </quill-editor>

                <p class="label">英文</p>
                <quill-editor v-model="infoForm.a_contentEn" ref="myQuillEditor" class="editer"
                        :options="editorOption" @ready="onEditorReady($event)">
                </quill-editor>
                <el-button type="primary w200 mrauto mt20" round @click="upload(4)">上传</el-button>
            </el-tab-pane>
            <el-tab-pane label="工程公司">
               <p class="label">中文</p>
                <quill-editor v-model="infoForm.b_content" ref="myQuillEditor" class="editer"
                        :options="editorOption" @ready="onEditorReady($event)">
                </quill-editor>
                <p class="label">英文</p>
                <quill-editor v-model="infoForm.b_contentEn" ref="myQuillEditor" class="editer"
                        :options="editorOption" @ready="onEditorReady($event)">
                </quill-editor>
                <el-button type="primary w200 mrauto mt20" round @click="upload(5)">上传</el-button>
            </el-tab-pane>
            <el-tab-pane label="设计公司">
                <p class="label">中文</p>
                <quill-editor v-model="infoForm.c_content" ref="myQuillEditor" class="editer"
                        :options="editorOption" @ready="onEditorReady($event)">
                </quill-editor>
                <p class="label">英文</p>
                <quill-editor v-model="infoForm.c_contentEn" ref="myQuillEditor" class="editer"
                        :options="editorOption" @ready="onEditorReady($event)">
                </quill-editor>
                <el-button type="primary w200 mrauto mt20" round @click="upload(6)">上传</el-button>
            </el-tab-pane>
        </el-tabs>
  </div>
</template>

<script>
// import ueditor from './ue.vue' //调用编辑器
export default {
  name: 'HelloWorld',
  data () {
    return {
      editorOption: {},
      infoForm:{
          a_content:'',
          a_contentEn:'',
          b_content:'',
          b_contentEn:'',
          c_content:'',
          c_contentEn:'',
      }
    }
  },
  methods:{
      onEditorReady(ueditor){
          // console.log(ueditor)
      },
      getRows(type){
          this.$http.get(this.$store.state.httpApi + 'aboutBolu/getOne?type='+type).then(response =>{
            if(response.status == 200){
              if(response.data.success){
                if(type == 4){
                  this.infoForm.a_content=response.data.data.content;
                  this.infoForm.a_contentEn=response.data.data.contentEn;
                }else if(type == 5){
                  this.infoForm.b_content=response.data.data.content;
                  this.infoForm.b_contentEn=response.data.data.contentEn;
                }else{
                  this.infoForm.c_content=response.data.data.content;
                  this.infoForm.c_contentEn=response.data.data.contentEn;
                }  
              }
            }else{
              console.log('接口返回失败!',response);
            }
            },response => {
              console.log('请求失败',response)
          })
      },
      upload(type) {
        var param={type:type};
       if(type == 4){
          param.content = this.infoForm.a_content;
          param.contentEn = this.infoForm.a_contentEn;
          this.contentEn = this.infoForm.a_contentEn;
        }else if(type == 5){
          param.content = this.infoForm.b_content;
          param.contentEn = this.infoForm.b_contentEn;
          this.contentEn = this.infoForm.b_contentEn;
        }else{
          param.content = this.infoForm.c_content;
          param.contentEn = this.infoForm.c_contentEn;
          this.contentEn = this.infoForm.c_contentEn;
        }  
        if(param.content!=''&&param.contentEn!=''){
          this.$http.post(this.$store.state.httpApi + ('aboutBolu/update'),param).then(response =>{
            if(response.status == 200){
              this.$message.success('上传成功');
              this.dialogTableVisible=false;
              this.getRows(type);
            }else{
              console.log('接口返回失败!',response);
            }
            },response => {
              console.log('请求失败',response)
          })
        }else{
          this.$message.error('您还有必填项还没有填！');
        }
         
      },

  },
  created(){
    this.getRows(4);
    this.getRows(5);
    this.getRows(6);
  },
  computed: {
    
   editor() {
    return this.$refs.myQuillEditor.quill
   }
  },
  components: {
//使用编辑器
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .label{
      margin:20px 0;
    }
</style>
